<template>
    <view class="ditu" :style="{height:height+'px'}">
        <map style="width:100%;height:60%;"
             :latitude="latitude"
             :longitude="longitude"
             :scale="scale"
             :markers="marker">
        </map>
        <view class="bottombox" >
          <!-- <view class="bold">{{ address_title }}</view>
          <view class="grey f-size m10">地址：{{ address }}</view> -->
          <view class="flex j-content row">
            <view class="red">*</view> 
            <view class="label">补卡类型</view> 
			<picker mode="selector" style="flex-grow: 1;text-align: right;" :range="typeList" @change="changetype" range-key="name">
			  <view class="picker"> {{ typename?typename:"请选择补卡类型" }}</view>
			</picker>
            <!-- <view class="ipt">
                <w-select width="100%"  border="none" fontSize="17px" marginright="40rpx" textagin="right"  :showClose="false" @change="changetype" :defaultValue="type || '请选择补卡类型'" valueName="name" :list="typeList"/>
            </view> -->
          </view>
          <view class="flex j-content row">
              <view class="red">*</view> 
            <view class="label">补卡时间</view> 
            <view class="ipt" style="text-align: right;">
                <leeDatetime @change="startDateChange" placeholder="请选择补卡时间" :value="replaceTime"/>
            </view>
        </view>
        <view class="flex j-content row">
        <view class="label">补卡原因</view> 
        <view class="ipt textr">
            <input type="text" placeholder="请输入补卡原因" v-model="reason" class="right">
        </view>
      </view>
        <view style="margin: 20px 0;">
            <view>备注</view> 
            <view class="ipt">
                <textarea class="texta" type="text" v-model="remark"></textarea>
            </view>
        </view>
        
          <view class="bold flex"><view class="red">*</view> 照片信息</view>
          <view>
              <view v-show="!imageurl" class="photoinfo" @click="getPhotos" style="border: 1rpx solid #e5e5e5;">
                  <image class="photo"  src="http://121.41.75.32:8002/file/static/ashPhoto.png"/>
              </view>
          
              <view  v-show="imageurl" class="photoinfo">
                  <image v-show="imageurl" class="showphoto" :src="imageurl"/>
                  <view class="del" @click="del">×</view>
              </view>
          </view>
         
          <button class="m10 btn" @click="submit">提交</button>
        </view>
    </view>
  </template>
  
  <script>
  import {getScreen, saveImage} from "../../service/auth";
  import  {laterSign}  from "@/service/api/signin";
  import leeDatetime  from "@/components/lee-datetime";
  export default {
    components: {
        leeDatetime,
    },
      data() {
          return {
              longitude:'',//经度
              latitude:'',//纬度
              address:'',//详细地址
              address_title:'',//建筑物地址
              scale:16,//缩放
              height:0,
              marker: [{
                  id: 0,
                  latitude: '', //纬度
                  longitude: '', //经度
                  alpha: 1, //透明度
                  width:20,
                  height:30,
              }],
              imageurl:'',
              time:'',
              typeList:[
                {id:1,name:'上班打卡'},
                {id:2,name:'下班打卡'},
            ],
            type:'',
            replaceTime:'',
            reason:'',
            remark:'',
			typename:''

          }
      },
      created(){
          const that = this
          const { height } = getScreen()
          this.height = height
          uni.getLocation({
          type: 'gcj02',
          geocode:true,
          isHighAccuracy:true,
          success: function (res) {
              that.longitude=res.longitude
              that.latitude=res.latitude
              // 标记
              that.marker[0].latitude = res.latitude
              that.marker[0].longitude = res.longitude
              console.log('当前位置的经度：' + res.longitude);
              console.log('当前位置的纬度：' + res.latitude);
              wx.request({
                  url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=QQXBZ-BUKYS-YEMOS-6DLDL-WMCTO-5ZFNX`,
              success(val) {
                  console.log(val,'定位');
                  that.address=val.data.result.address
                  that.address_title=val.data.result.address_reference.landmark_l2.title
            }
          })
          }
  });
      },
      methods: {
          
          getPhotos(){
              const date = new Date();
              const year = date.getFullYear();
              const month = date.getMonth()+1;
              const day = date.getDate();
              const hour = date.getHours();
              const minute = date.getMinutes();
              const Seconds = date.getSeconds();
              const _this = this
              uni.chooseImage({
              count: 1, //默认9
              sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera'], //使用相机
              success: function (res) {
              _this.imageurl=res.tempFilePaths[0]
              saveImage(_this.imageurl).then(res=>{
                  _this.imageurl=res
                //   _this.time=year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + " " + (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute)+":"+(Seconds<10?'0'+Seconds : Seconds);
              })
              
              }
              });
          },
          del(){
              this.imageurl=''
          },
          submit(){
            if (!this.type) {
                uni.showToast({
                  title:'补卡类型不能为空',
                  icon:'none'
                  })
              }else if (!this.replaceTime) {
                uni.showToast({
                  title:'补卡时间不能为空',
                  icon:'none'
                  })
              }else if (!this.imageurl) {
                uni.showToast({
                  title:'图片不能为空',
                  icon:'none'
                  })
              }else{
                  let i=0
                  uni.showLoading({title:'提交中'})
                const sign =setInterval(()=>{
                    i++
                    if(i >= 10){
                        uni.hideLoading('图片保存失败请重新上传')
                        return clearInterval(sign)
                    }
                    if(/^http:\/\/[\d\.]+/.test(this.imageurl)){
                        clearInterval(sign)
                        const data={
                            imgUrl: this.imageurl,
                            type:this.type,
                            replaceTime:this.replaceTime,
                            reason:this.reason,
                            remark:this.remark,
                        }
                            laterSign(data).then(res=>{
                                uni.navigateBack({
                                    delta: 1,
                                })
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                                })
                            }).catch(err=>{
                                uni.showToast({
                                title:err.msg,
                                icon:'none'
                                })
                            })
                    }
                },500)
            }
          },
            startDateChange(e) {
              this.replaceTime=e.value
            },
            changetype(e){
                const index = e.target.value*1
                this.typename=this.typeList[index].name
                this.type=index+1
                console.log(this.type)
            }
      },
  }
  </script>
  
  <style lang="scss" scoped>
  .ditu{
      position: relative;
      .bottombox{
          position: absolute;
          bottom: 0;
          width: 100%;
        //   height: 41%;
          border-top-left-radius: 40rpx;
          border-top-right-radius: 40rpx;
          background: white;
          padding: 40rpx;
          .photoinfo{
              height: 240rpx;
              border-radius: 20rpx;
              position: relative;
              margin-top: 10rpx;
              .photo{
                  height: 100rpx;
                  width: 100rpx;
                  // margin: auto;
                  margin: 70rpx auto;
                  border-radius: 20rpx;
                  
              }
              .showphoto{
                  border-radius: 20rpx;
                  height: 240rpx;
              }
              .del{
                  background-color: red;
                  color: white;
                  width: 30rpx;
                  height: 30rpx;
                  position: absolute;
                  right: 10rpx;
                  top: 10rpx;
                  text-align: center;
                  align-items: center;
                  justify-content: center;
                  display: flex;
                  font-size: 25rpx;
                  line-height: 30rpx;
              }
          }
          .f-size{
              font-size: 26rpx;
          }
          .bold{
              font-weight: bold;
          }
          .m10{
              margin: 20rpx 0;
          }
          .btn{
              background-color: #03a9f4;
              color: white;
              border-radius: 50rpx;
          }
          }
  }
  .row{
    line-height: 120rpx;
	border-bottom: rgba(200, 200, 200, 0.5) 1px solid;
  }
  .ipt{
        flex-grow: 1;
        margin: auto;
    }
    .textr{
        text-align: right;
    }
      .texta{
      	height: 150rpx;
      	border:1px solid rgba(200, 200, 200, 0.5);
      	margin-top: 10rpx;
      	width: 100%;
      }
  </style>